import React, { Component } from 'react';
import {
    View,
    ImageBackground,
    TouchableOpacity,
    StatusBar,
    Text
} from 'react-native';
import { unitWidth } from '../constants/AdapterUtil';
import NavigationService from '../constants/NavigationService';
import Colors from '../constants/Colors';
import { save, LoginToken, load } from '../constants/MyStorage';

export default class WelcomeScreen extends Component {

    constructor(props) {
        super(props);
        this.state = {
            time: 5,
        }
    }

    componentDidMount() {
        this.props.navigation.addListener('didFocus', payload => {
            this.autoLogin();
            // this.interval = setInterval(() => {
            //     if (this.state.time <= 0) {
            //         this.autoLogin();
            //     } else {
            //         this.setState({
            //             time: this.state.time - 1,
            //         })
            //     }
            // }, 1000);
        })
        //离开这个页面后就停止刷新
        this.props.navigation.addListener('willBlur', payload => {
            // clearInterval(this.interval);
        })
    }

    componentWillUnmount() {
        // clearInterval(this.interval);
    }

    render() {
        return (
            // <ImageBackground style={{ flex: 1, alignItems: 'center' }} source={require('../res/bg_welcome.png')}>
            //     <StatusBar
            //         animated={false} //指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden
            //         hidden={false}  //是否隐藏状态栏。
            //         translucent={true}//指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。
            //         barStyle={'dark-content'} // enum('default', 'light-content', 'dark-content')
            //         backgroundColor={'rgba(0,0,0,0)'}
            //     />
            //     <TouchableOpacity style={{
            //         width: 40 * unitWidth, height: 40 * unitWidth, alignItems: 'center', justifyContent: 'center',
            //         backgroundColor: Colors.colorE8, borderRadius: 20 * unitWidth, position: 'absolute', top: 35 * unitWidth, right: 26 * unitWidth,
            //     }} onPress={() => {
            //         // this.props.navigation.navigate('Login');
            //         this.autoLogin();
            //     }}>
            //         <Text style={{ fontSize: 9 * unitWidth, color: Colors.color99 }}>{this.state.time}S</Text>
            //         <Text style={{ fontSize: 9 * unitWidth, color: Colors.color99 }}>跳过</Text>
            //     </TouchableOpacity>
            // </ImageBackground>
            <View />
        );
    }

    autoLogin() {
        load(LoginToken, {
            success: (ret) => {
                global.token = ret.token;
                NavigationService.navigate('MainStack');
            },
            fail: (err) => {
                this.props.navigation.navigate('Login');
            }
        })
    }
}